<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${provinceName}">各省详情数据</title>
    <script src="/js/echarts.js"></script>
<!--    <script type="text/javascript" src="/js/map/江苏省.js"></script>-->
    <script src="/js/vintage.js"></script>
    <script src="/js/jquery-3.6.0.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/detail.css">
    <link rel="shortcut icon" href="/img/favicon.ico" />
    <script type="text/javascript" th:inline="javascript">
        var provinceName=[[${provinceName}]];
        var province = provinceName.toString().replace("省","").replace("壮族","").replace("回族","").replace("自治区","").replace("维吾尔","").replace("市","");

        //加载对应省份的js文件
        loadJS('/js/map/'+provinceName+'.js');
        function loadJS( url ){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        window.onload=function () {

            // 初始化echarts实例
            let myChart = echarts.init(document.getElementById('detail'));
            let jiangsu = {
                title: {  //标题样式
                    text:provinceName+'疫情分布地图',
                    x: 'center',
                    textStyle: {
                        fontSize: 25,
                        color: "black"
                    }
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration:0.2,
                    formatter: function (params) {
                        let value=(params.value+'').split('.');
                        value=value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,');
                        return params.seriesName + ' <br/> ' + params.name+':'+value;
                    }
                },
                visualMap: {//视觉映射组件
                    // left: 'left',
                    // min: 500000,
                    // max: 3800000,
                    // //text: ['High', 'Low'],
                    // calculable: true,  //是否显示拖拽用的手柄
                    // inRange: {
                    //     color:['#313695','#4575b4','#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    //  },
                    // text: ['High','Low'],
                    // show:false
                    top: 'bottom',
                    left: 'left',
                    min: 100,
                    max: 5000,
                    //text: ['High', 'Low'],
                    realtime: false,  //拖拽时，是否实时更新
                    calculable: true,  //是否显示拖拽用的手柄
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                graphic: [
                    {
                        type: 'image', // 图形元素类型
                        id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                        right: 'center', // 根据父元素进行定位 （居中）
                        bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                        z: 0,  // 层叠
                        bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                        style: {
                            image: '/img/背景图片.jpg',
                            width: 2200,
                            height: 2000
                        }
                    }
                ]
                // series: [
                //     {
                //         name: provinceName+'各市/区数据',
                //         type: 'map',
                //         mapType: '内蒙古',
                //         roam:true,
                //         label: {
                //             normal:{
                //                 show:true,
                //                 textStyle:{
                //                     color:'rgba(0,255,0,1)'
                //                 }
                //             }
                //         },
                //         itemStyle: {//地图区域的多边形 图形样式
                //             emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                //                 label: {show: true}
                //             }
                //         },
                //         textFixed:{
                //             Alaska:[20,20]
                //         },
                //         //[{name:"",value:0},{}]
                //         data: [
                //             //呼和浩特市，包头市，乌海市，赤峰市，通辽市，鄂尔多斯市，呼伦贝尔市，乌兰察布市，巴彦淖尔市，阿拉善盟，锡林郭勒盟，兴安盟
                //             {name: '呼和浩特市', value: 4822023},
                //             {name: '包头市', value: 731449},
                //             {name:'乌海市', value: 6553255},
                //             {name: '赤峰市', value: 2949131},
                //             {name: '通辽市', value: 38041430},
                //             {name: '鄂尔多斯市', value: 5187582},
                //             {name: '呼伦贝尔市', value: 3590347},
                //             {name: '乌兰察布市', value: 917092},
                //             {name: '巴彦淖尔市', value: 632323},
                //             {name: '阿拉善盟', value: 1931751},
                //             {name:'锡林郭勒盟', value: 9919945},
                //             {name: '兴安盟', value: 1392313}
                //         ]
                //     }
                // ]
            };
            $.ajax({
                type: "post",
                url:"/detailData?provinceName="+provinceName,
                dataType:"json",
                success:function (mapData){    //[{name,value},{}]
                    myChart.hideLoading();
                    myChart.setOption({
                        series: [
                            {
                                name: provinceName+'各市/区数据',
                                type: 'map',
                                mapType: province,
                                roam:true,
                                label: {
                                    normal:{
                                        show:true,
                                        textStyle:{
                                            color:'rgba(0,255,0,1)'
                                        }
                                    }
                                },
                                itemStyle: {//地图区域的多边形 图形样式
                                    normal: {//是图形在默认状态下的样式
                                        label: {
                                            show: true,//是否显示标签
                                            textStyle: {
                                                color: "black"
                                            }
                                        }
                                    },
                                    zoom: 1.5,  //地图缩放比例,默认为1
                                    emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                        label: {show: true}
                                    }
                                },
                                top: "3%",//组件距离容器的距离
                                textFixed:{
                                    Alaska:[20,20]
                                },
                                //[{name:"",value:0},{}]
                                data: mapData
                            }
                        ]
                    })
                }
            })

            //使用刚指定的配置项和数据显示图表。
            myChart.setOption(jiangsu);
        }
    </script>
</head>
<body background="/img/背景图片.jpg">
    <div id="detail"></div>
</body>
</html>